<template>
	<view id="answer_container">
		<uni-card class="uni_card" :title="'第' + currentTopicNumber + '题'" :extra="'剩' + (70 - currentTopicNumber) + '题'">
			<!-- 题目 -->
			<view class="question">Q：{{ currentTopic.question }}</view>
			<!-- 选择区 -->
			<view class="options">
				<view class="optionA option" @click="selecteHandle('A')" :class="{ selected: selected == 'A' }">A：{{ currentTopic.optionA }}</view>
				<view class="optionB option" @click="selecteHandle('B')" :class="{ selected: selected == 'B' }">B: {{ currentTopic.optionB }}</view>
			</view>
			<!-- 下一步按钮 -->
			<view class="next_btn" @click="nextHandle">{{ btnText }}</view>
			<view style="height: 10px"></view>
		</uni-card>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';

// 当前的题号
let currentTopicNumber = ref(1);
// 题目列表
let topics = ref([]);
// 当前题目数据
let currentTopic = ref({});
// 选择了哪一个
let selected = ref('');
// 选择的答案列表
let answers = ref([]);
// 按钮文本：“下一题”或“提交”
let btnText = ref("下一题");

onMounted(() => {
	// 获取题库数据
	getTopics();
});

onShow(()=>{
	// 检查用户是否有测试机会
	checkUserPayStatus()
})

async function checkUserPayStatus(){
	const res = await uni.$http.get(`/payInfos/checkUserPayStatus/${uni.getStorageSync("openId")}`);
	if(res.data.code == 0){
		uni.switchTab({
			url:"/pages/index/index"
		})
		return 1;
	}
}

// 获取题目
async function getTopics() {
	const { data: res } = await uni.$http.get('/mbtiTests/all');
	if (res.code != 0) {
		topics.value = res.data;
		// 显示第一题
		currentTopic.value = topics.value[currentTopicNumber.value - 1];
	}
}

// 选择题目处理器
function selecteHandle(selectOp) {
	selected.value = selectOp;
}

// “下一题”处理器
function nextHandle() {
	if (currentTopicNumber.value == 70) {
		// 执行提交，统计选项推算出性格类型
		commitHandle();
		return 1;
	}

	if (selected.value == '') {
		// 空选择提示
		uni.showToast({
			icon: 'none',
			title: '请先选择'
		});
		return 1;
	}

	// 存储选择, 存储到数组中，后面统计在分拣
	answers.value.push(selected.value);

	// 题号加1，更换题目
	currentTopicNumber.value += 1;
	currentTopic.value = topics.value[currentTopicNumber.value - 1];
	
	// 如果显示了最后一题，修改按钮文本为“提交”
	if(currentTopicNumber.value == 70){
		btnText.value = "提交";
	}
	// 选择置空
	selected.value = '';
}

// 执行提交，根据70题的选择推算出MBTI的结果
function commitHandle() {
	// 统计推算性格类型
	// 创建一个数组来存储每组的统计结果
	const result = Array.from({ length: 7 }, () => ({ A: 0, B: 0 }));

	// 遍历原数组，按规则分组并统计
	for (let i = 0; i < answers.value.length; i++) {
		const groupIndex = i % 7; // 计算组的索引
		const value = answers.value[i];
		if (value === 'A') {
			result[groupIndex].A++;
		} else if (value === 'B') {
			result[groupIndex].B++;
		}
	}

	// 合并统计结果
	const finalResult = [
		result[0], // 第一组保持不变
		{
			A: result[2].A + result[1].A,
			B: result[2].B + result[1].B
		}, // 合并第二组和第三组
		{
			A: result[4].A + result[3].A,
			B: result[4].B + result[3].B
		}, // 合并第四组和第五组
		{
			A: result[6].A + result[5].A,
			B: result[6].B + result[5].B
		} // 合并第六组和第七组
	];

	let results = [];
	let hasEqual = false;
	
	const choices = [
	  ['E', 'I'], // 第一个元素
	  ['S', 'N'], // 第二个元素
	  ['T', 'F'], // 第三个元素
	  ['J', 'P']  // 第四个元素
	];
	
	finalResult.forEach((item, index) => {
	  if (item.A === item.B) {
	    hasEqual = true; // 存在相等情况
	  } else if (item.A > item.B) {
	    results[index] = [choices[index][0]];
	  } else {
	    results[index] = [choices[index][1]];
	  }
	});
	
	// 如果有相等情况，生成组合
	if (hasEqual) {
	  const allResults = [];
	  const combinations = (current, index) => {
	    if (index === results.length) {
	      allResults.push(current);
	      return;
	    }
	    
	    if (results[index]) {
	      combinations([...current, ...results[index]], index + 1);
	    } else {
	      // 对应的索引为null，添加所有可能选项
	      combinations([...current, choices[index][0]], index + 1); // 选择第一个
	      combinations([...current, choices[index][1]], index + 1); // 选择第二个
	    }
	  };
	
	  combinations([], 0);
	  results = allResults;
	} else {
	  results = results.map((result, index) => result || choices[index]);
	}

	console.log('性格类型数组：', results);
	
	let mbtiResult = [];
	let mbtiText = "";
	// 判断结果是否有多个性格类型
	if(results[0].length == 1){
		// 说明只有1个类型：因为如果有多个类型，则存在的二维数组中每个元素数组长度都为4
		// 如果只有一个性格类型，则二维数组中，每一个数组长度都为1，每一个数组中第一个元素整合则为性格类型。
		for(let i = 0; i < 4; i++){
			mbtiText +=  results[i][0];
		}
		mbtiResult.push(mbtiText);
	}else{
		// 存在多个性格类型
		for(let i = 0; i < results.length; i++){
			for(let text of results[i]){
				mbtiText += text;
			}
			mbtiResult.push(mbtiText);
			mbtiText = "";
		}
	}
	
	// 将性格类型存入本地存储
	uni.setStorageSync("mbti-strs", JSON.stringify(mbtiResult));
	if(mbtiResult.length == 1){
		uni.showToast({
			icon:"none",
			title:`你的测试结果：【${mbtiResult[0]}】`
		})
	}else{
		let contactStr = "";
		for(let item of mbtiResult){
			contactStr += item+" | ";
		}
		uni.showToast({
			icon:"none",
			title:`你的测试结果：【${contactStr}】`
		})
	}
	
	setTimeout(()=>{
		uni.showToast({
			title:"即将跳转分析页",
			icon:"none"
		})
	}, 2000)
	// 页面跳转
	setTimeout(()=>{
		uni.navigateTo({
			url: "/pages/analyze/analyze"
		})
	}, 3500)
}
</script> 

<style scoped>
.question {
	font-size: 16px;
	font-weight: 600;
}

.options {
	margin-top: 10px;
}

.option {
	padding: 10px 10px;
	margin-top: 10px;
}

.next_btn {
	width: max-content;
	margin: 0 auto;
	border: solid #698bca 1px;
	margin-top: 12px;
	padding: 8px 22px;
	border-radius: 10px;
}

.selected {
	background-color: #e9e7e7;
	border-radius: 10px;
	color: #000;
}
</style>
